import { computed, inject, provide, h } from 'vue'

export const RouterView = {
  setup(props, {slots}) {
    let currentLocation = inject('location')
    let depth = inject('++', 0); // 用来记录RouterView是底基层
    // console.log(currentLocation)
    provide('++', depth + 1);
    const matchedComputed = computed(() => currentLocation.matched[depth])
    return () => {
      const record = matchedComputed.value
      const viewComponent = record?.components?.default
      if (viewComponent) {
        return h(viewComponent)
      } else {
        return slots.default && slots.default()
      }
    }
  }
}


// path = > matched [/my,/my/a]
// [<routerv-view>,<routerv-view>]